﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FlowDiagramPrint.aspx.cs" Inherits="bts_webapp.FlowDiagramPrint" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript" src="Scripts/joint.all.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="sMan" runat="server" />
    
        <div id="diagram">
        </div>
     
        <asp:HiddenField ID="hfStation" runat="server" />
        <asp:HiddenField ID="hfDevices" runat="server" />
        <asp:HiddenField ID="hfCards" runat="server" />
        <asp:HiddenField ID="hfCardsIncoming" runat="server" />
        <asp:HiddenField ID="hfCardsOutcoming" runat="server" />
        <asp:HiddenField ID="hfIncomingStation" runat="server" />
        <asp:HiddenField ID="hfOutgoingStation" runat="server" />
        <asp:HiddenField ID="hflag" runat="server" />

        <telerik:RadCodeBlock ID="rcb" runat="server">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                <script language="javascript" type="text/javascript">
            makeDiagram3(800, 16000);

            function makeDiagram(width, height) {

                var org = Joint.dia.org;
                Joint.paper("diagram", width, height);

                //========= for station ==============================
                var pXStation = 300;
                var pYStation = 5;
                var stationName = $get('<%= hfStation.ClientID %>').value;

                var station = org.Member.create({
                    rect: { x: pXStation, y: pYStation, width: 160, height: 60 },
                    name: stationName,
                    avatar: 'Image/Station.png',
                    attrs: { fill: 'yellow', stroke: 'brown' }
                });

                //============= devices =========================================
                /*var pXDevice = 460;*/
                var pXDevice = 400;
                var pYDevice = 100;
                var deviceVal = $get('<%= hfDevices.ClientID %>').value;
                if (deviceVal != "") {
                    var deviceNames = $get('<%= hfDevices.ClientID %>').value.split('|');
                    var deviceList = [];
                    for (var i = 0; i < deviceNames.length; i++) {
                        var device = org.Member.create({
                            rect: { x: pXDevice, y: pYDevice, width: 30, height: 30 },
                            name: deviceNames[i],
                            avatar: 'Image/Device.png',
                            attrs: { fill: 'green', stroke: 'brown' }
                        });
                        deviceList.push(device);
                        pYDevice += 60;
                    }
                }


                //============== incoming stations ===============================
                var pXIncoming = 5;
                var pYIncoming = 5;
                var incomingVal = $get('<%= hfIncomingStation.ClientID %>').value;
                var incomingList = [];
                if (incomingVal != "") {

                    var incomingStationNames = incomingVal.split('|');

                    for (var i = 0; i < incomingStationNames.length; i++) {
                        var currentVal = incomingStationNames[i];
                        var incomingStationNames2 = [currentVal];
                        if (currentVal.indexOf('@') >= 0)
                            incomingStationNames2 = currentVal.split('@');
                        var tempList = [];
                        for (var j = 0; j < incomingStationNames2.length; j++) {
                            if (incomingStationNames2[j].trim() == "")
                                continue;
                            var incomingStation = org.Member.create({
                                rect: { x: pXIncoming, y: pYIncoming, width: 140, height: 60 },
                                name: incomingStationNames2[j],
                                avatar: 'Image/Station.png',
                                attrs: { fill: 'blue', stroke: 'brown' }
                            });
                            tempList.push(incomingStation);
                            pYIncoming += 90;
                        }
                        incomingList.push(tempList);
                    }
                }

                //============== outgoing stations ========================
                /*var pXOutgoing = 780;*/
                var pXOutgoing = 600;
                var pYOutgoing = 5;
                var outgoingVal = $get('<%= hfOutgoingStation.ClientID %>').value;
                var outgoingList = [];
                if (outgoingVal != "") {
                    var outgoingStationNames = outgoingVal.indexOf('@') >= 0 ? outgoingVal.split('|') : [outgoingVal];

                    for (var i = 0; i < outgoingStationNames.length; i++) {
                        var currentVal = outgoingStationNames[i];
                        var outgoingStationNames2 = [currentVal];
                        if (currentVal.indexOf('@') >= 0)
                            outgoingStationNames2 = currentVal.split('@');
                        var tempList = [];
                        for (var j = 0; j < outgoingStationNames2.length; j++) {
                            if (outgoingStationNames2[j].trim() == "")
                                continue;
                            var outgoingStation = org.Member.create({
                                rect: { x: pXOutgoing, y: pYOutgoing, width: 140, height: 60 },
                                name: outgoingStationNames2[j],
                                avatar: 'Image/Station.png',
                                attrs: { fill: 'red', stroke: 'brown' }
                            });

                            tempList.push(outgoingStation);
                            pYOutgoing += 80;
                        }
                        outgoingList.push(tempList);
                    }
                }

                //================ link all together =========================

                var temp = station;
                for (var i = 0; i < deviceList.length; i++) {
                    temp.joint(deviceList[i], org.arrow);
                    temp = deviceList[i];
                }

                if (incomingList.length > 0) {
                    for (var i = 0; i < deviceList.length; i++) {
                        var subIncomingList = incomingList[i];
                        for (var j = 0; j < subIncomingList.length; j++)
                            deviceList[i].joint(subIncomingList[j], org.arrow);

                    }
                }

                if (outgoingList.length > 0) {
                    for (var i = 0; i < deviceList.length; i++) {
                        var subOutgoingList = outgoingList[i];
                        for (var j = 0; j < subOutgoingList.length; j++)
                            deviceList[i].joint(subOutgoingList[j], org.arrow);
                    }
                }

            }


            function makeDiagram2(width, height) {

                var org = Joint.dia.org;
                Joint.paper("diagram", width, height);

                //========= for station ==============================
                var pXStation = 300;
                var pYStation = 5;
                var stationName = $get('<%= hfStation.ClientID %>').value;

                var station = org.Member.create({
                    rect: { x: pXStation, y: pYStation, width: 160, height: 60 },
                    name: stationName,
                    avatar: 'Image/Station.png',
                    attrs: { fill: 'yellow', stroke: 'brown' }
                });

                //============= cards =========================================
                /*var pXDevice = 460;*/
                var pXCard = 400;
                var pYCard = 100;
                var cardVal = $get('<%= hfCards.ClientID %>').value;
                var cardList = [];
                if (cardVal != "") {
                    var cardNames = $get('<%= hfCards.ClientID %>').value.split('|');

                    for (var i = 0; i < cardNames.length; i++) {
                        var card = org.Member.create({
                            rect: { x: pXCard, y: pYCard, width: 30, height: 30 },
                            name: cardNames[i],
                            avatar: 'Image/Device.png',
                            attrs: { fill: 'green', stroke: 'brown' }
                        });
                        cardList.push(card);
                        pYCard += 60;
                    }
                }


                //============== incoming stations ===============================
                var pXIncoming = 5;
                var pYIncoming = 5;
                var incomingVal = $get('<%= hfIncomingStation.ClientID %>').value;
                var incomingList = [];
                if (incomingVal != "") {

                    var incomingStationNames = incomingVal.split('|');

                    for (var i = 0; i < incomingStationNames.length; i++) {
                        var currentVal = incomingStationNames[i];
                        var incomingStationNames2 = [currentVal];
                        if (currentVal.indexOf('@') >= 0)
                            incomingStationNames2 = currentVal.split('@');
                        var tempList = [];
                        for (var j = 0; j < incomingStationNames2.length; j++) {
                            if (incomingStationNames2[j].trim() == "")
                                continue;
                            var incomingStation = org.Member.create({
                                rect: { x: pXIncoming, y: pYIncoming, width: 140, height: 60 },
                                name: incomingStationNames2[j],
                                avatar: 'Image/Station.png',
                                attrs: { fill: 'blue', stroke: 'brown' }
                            });
                            tempList.push(incomingStation);
                            pYIncoming += 90;
                        }
                        incomingList.push(tempList);
                    }
                }

                //============== outgoing stations ========================
                /*var pXOutgoing = 780;*/
                var pXOutgoing = 600;
                var pYOutgoing = 5;
                var outgoingVal = $get('<%= hfOutgoingStation.ClientID %>').value;
                var outgoingList = [];
                if (outgoingVal != "") {
                    var outgoingStationNames = outgoingVal.indexOf('@') >= 0 ? outgoingVal.split('|') : [outgoingVal];

                    for (var i = 0; i < outgoingStationNames.length; i++) {
                        var currentVal = outgoingStationNames[i];
                        var outgoingStationNames2 = [currentVal];
                        if (currentVal.indexOf('@') >= 0)
                            outgoingStationNames2 = currentVal.split('@');
                        var tempList = [];
                        for (var j = 0; j < outgoingStationNames2.length; j++) {
                            if (outgoingStationNames2[j].trim() == "")
                                continue;
                            var outgoingStation = org.Member.create({
                                rect: { x: pXOutgoing, y: pYOutgoing, width: 140, height: 60 },
                                name: outgoingStationNames2[j],
                                avatar: 'Image/Station.png',
                                attrs: { fill: 'red', stroke: 'brown' }
                            });

                            tempList.push(outgoingStation);
                            pYOutgoing += 80;
                        }
                        outgoingList.push(tempList);
                    }
                }

                //================ link all together =========================

                var temp = station;
                for (var i = 0; i < cardList.length; i++) {
                    temp.joint(cardList[i], org.arrow);
                    temp = cardList[i];
                }

                if (incomingList.length > 0) {
                    for (var i = 0; i < cardList.length; i++) {
                        var subIncomingList = incomingList[i];
                        for (var j = 0; j < subIncomingList.length; j++)
                            cardList[i].joint(subIncomingList[j], org.arrow);

                    }
                }

                if (outgoingList.length > 0) {
                    for (var i = 0; i < cardList.length; i++) {
                        var subOutgoingList = outgoingList[i];
                        for (var j = 0; j < subOutgoingList.length; j++)
                            cardList[i].joint(subOutgoingList[j], org.arrow);
                    }
                }

            }



    </script>
        </telerik:RadCodeBlock>

    </form>
</body>
</html>
